<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>{{.title}}</title>
    <meta charset="utf-8" name="keywords" content="{{.system.keywords}}" />
    <meta charset="utf-8" name="description" content="{{.system.description}}" />
    <link rel ="shortcut Icon" href="{{.system.pathname}}">
    <link rel="stylesheet" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/css/index.min.css" />
    <link rel="stylesheet" type="text/css" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/font/iconfont.css">
    <link rel="stylesheet" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/admin/css/xcConfirm.css">
    <link rel="stylesheet" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/admin/css/toast.css" />
    <style type="text/css">
      .combined { width: 1190px; margin: 0 auto; }
      .combined .comBox { width: 100%; overflow: hidden; padding-bottom: 5px; padding-left: 3px; }
      .combined .comBox .box { overflow: hidden; padding: 8px; width: 48.5%; float: left; }
      .combined .comBox .box:hover { box-shadow: 0 0 6px #ddd; }
      .combined .comBox h3 { font-size: 18px; font-weight: 700; line-height: 300%; }
      .combined .comBox dl { width: 50%; overflow: auto; float: left; }
      .combined .comBox dl dt { float: left; width: 120px; height: 120px; overflow: hidden; display: -webkit-box; -webkit-box-align: center; margin-right: 15px; }
      .combined .comBox dl dt img { width: 100%; }
      .combined .comBox dl dd { }
      .combined .comBox dl dd p:nth-of-type(1) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; margin-bottom: 5px; }
      .combined .comBox dl dd p:nth-of-type(2) { font-size: 12px; color: #e54242; margin-bottom: 5px; }
      .combined .comBox dl dd p:nth-of-type(2) span { font-size: 18px; margin: 0 2px; }
      .combined .comBox dl dd p:nth-of-type(3) { color: #444; }
      .combined .comBox div.num { float: left; width: 20%; text-align: center; line-height: 120px; height: 120px; }
      .combined .comBox div.num span { border: 1px solid #aaa; width: 25px; height: 25px; display: inline-block; overflow: hidden; margin-left: -4px; text-align: center; line-height: 25px; font-size: 15px; cursor: pointer;user-select:none; }
      .combined .comBox div.num span:nth-of-type(1) { font-size: 20px;border-right: 1px solid #aaa }
      .combined .comBox div.num span:nth-of-type(2) { border-right: none; border-left: none; width: 35px; }
      .combined .comBox div.num span:nth-of-type(2) input { width: 100%; height: 100%; margin: 0; border: none; margin-top: -3px; text-align: center; font-size: 12px; outline: none;border-left: 1px solid #aaa ;
      }
      .combined .comBox div.num p {position: relative;top: -105px;color: #999}
	input[type=number] {
	-moz-appearance:textfield;
	}
	input[type=number]::-webkit-inner-spin-button,
	input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
	}
  .combined .comBox div.info { width: 27%; height: 120px; float: left; font-size: 12px; }
      .combined .comBox span.cancel { width: 3%; text-align: right; display: inline-block; cursor: pointer; }
      div.footer { width: 1190px; height: 45px; margin: 0 auto; margin-top: 10px; box-shadow: 0 0 3px #eee; background-color: #fcfcfc; }
      div.footer button { width: 150px; height: 100%; background-color: #e54242; color: #fff; border: none; float: right; }
      div.footer p { float: left; line-height: 45px; margin: 0 20px; font-size: 18px; color: #e54242; }
      div.footer p span { font-size: 12px; margin-right: 2px; }
    </style>
  </head>
  <body class="search">
  {{template "pc/public/head.html" .}}
    {{template "pc/public/search.html" .}}
    <!--from fragment-->
    <div class="combined">
    	<form>


      <div class="comBox">
        <h3>{{.title}}</h3>
        {{range .product}}
        <div class="box">
          <a href="/product/content?id={{.id}}">
          <dl>
            <dt><img src="{{.pathname}}" alt=""></dt>
            <dd>
              <p>{{.title}}</p>
              <p>&yen;<span>{{.price}}</span>/个</p>
              <p>
                型号：{{.model}}<br />
                装箱数：{{.number}}
              </p>
            </dd>
          </dl>
          </a>
          <div class="num">
            <span class="cut" data-min="{{if .min}}{{.min}}{{else}}{{.minbuy}}{{end}}">-</span>
            <span class="number"><input type="number" onchange="changenum(this)" value="{{if .min}}{{.min}}{{else}}{{.minbuy}}{{end}}" name="num" data-min="{{if .min}}{{.min}}{{else}}{{.minbuy}}{{end}}"></span>
            <span class="add">+</span>
            {{if gt .minbuy "1"}}
            <p>最小购买为{{.minbuy}}</p>
            {{end}}
          </div>
          <div class="info">
            品牌：{{.bname}}<br />
            长度(cm/箱)：{{.length}}<br />
            高度(cm/箱)：{{.height}}<br />
            宽度(cm/箱)：{{.width}}<br />
            重量(g/个)：{{.weight}}<br />
            <!-- 尺寸：10cm*20cm*30cm -->
          </div>
          <span class="cancel iconfont">&#xe759;</span>
        </div>
        <input type="hidden" name="id" value="{{.id}}">
        {{end}}
      </div>
    	</form>
    </div>
    <div class="footer">
      <!-- <p><span>合计：&yen;</span>100.00</p> -->
      <button id="addcar">添加到购物车</button>
    </div>
   

    {{template "pc/public/foot.html" .}}
  </body>
<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/js/jquery.min.js"></script>
<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/admin/js/xcConfirm.js"></script>
<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/js/toast.js"></script>
<script type="text/javascript">
	$('.cancel').click(function(){
		var that=$(this)
		wxc.xcConfirm("您确定要删除此产品吗?","confirm",{onOk:function(){
	      that.parent().remove()
	    }});
	})
	$('.cut').click(function(){
		var input=$(this).siblings('.number').find('input')
		var num=input.val()
    var min=$(this).attr("data-min") 
		if(num>min){
			input.val(num-1)
		}
	})
	$('.add').click(function(){
		var input=$(this).siblings('.number').find('input')
		var num=input.val()
			input.val(parseInt(num)+1)
	})
  function changenum(e) {
    var val = $(e).val()
    var min = $(e).attr("data-min")
    $(e).val(val < min ? min : val)
  }
	$('#addcar').click(function(){
		var form=$('form').serialize()
		$.ajax({
			url:window.location.href,
			type:'post',
			data:form,
			success:function(res){
				if(res==1){
					wxc.xcConfirm("添加成功","success",{onClose:function(){
						window.location.href="/shopcar"
					}})
				}else if(res==962){
					wxc.xcConfirm("您还没有登入,请先登入","confirm",{onOk:function(){
		              window.location.href="/login"
		            }})
				}else{
					showToast("网络繁忙,请稍后再试!")
				}
			}
		})
	})
</script>

</html>